<div class="flex h-full flex-col">
  <!-- 工具栏 -->
  <app-toolbar></app-toolbar>

  <div class="flex flex-1">
    <!-- Sidebar -->
    <div
      class="transition-all duration-300 bg-white border-r border-gray-200 overflow-hidden flex flex-col"
      [class.w-80]="layoutService.sidebarOpen()"
      [class.w-0]="!layoutService.sidebarOpen()"
    >
      @if (layoutService.sidebarOpen()) {
        <div class="h-full flex flex-col">
          <!-- 表格列表 -->
          <div class="flex-1 overflow-y-auto">
            <app-table-list></app-table-list>
          </div>

          <!-- 统计信息 -->
          <div class="border-t border-gray-200 p-4 bg-gray-50">
            <div class="text-sm text-gray-600 space-y-1">
              <div>表格: {{ tablesService.tables().length }}</div>
              <div>注释: {{ notesService.notes().length }}</div>
              <div>区域: {{ areasService.areas().length }}</div>
            </div>
          </div>
        </div>
      }
    </div>

    <!-- Main Canvas Area -->
    <div class="flex-1 relative overflow-hidden bg-gray-50">
      <!-- Canvas -->
      <div
        class="w-full h-full relative canvas-container"
        [style.transform]="'translate(' + transformService.transform().x + 'px, ' + transformService.transform().y + 'px) scale(' + transformService.transform().zoom + ')'"
        style="transform-origin: 0 0;"
      >
        <!-- Canvas 网格背景 -->
        <div class="absolute inset-0 opacity-20 canvas-grid"></div>

        <!-- Canvas 内容区域 -->
        <div class="absolute inset-0">

          <!-- 渲染区域 (最底层) -->
          @for (area of areasService.areas(); track area.id) {
            <div
              class="absolute border-2 border-dashed rounded-lg opacity-50 select-none transition-colors"
              [class.cursor-move]="!dragService.dragState().isDragging"
              [class.cursor-grabbing]="dragService.dragState().isDragging && dragService.dragState().draggedItem?.id === area.id"
              [style.left.px]="area.x"
              [style.top.px]="area.y"
              [style.width.px]="area.width"
              [style.height.px]="area.height"
              [style.background-color]="area.color"
              [style.border-color]="area.color"
              [style.z-index]="dragService.dragState().draggedItem?.id === area.id ? 1000 : 0"
              (mousedown)="onMouseDown($event, area.id, 'area', area.x, area.y)"
            >
              <div class="p-2">
                <div class="text-sm font-medium opacity-80 pointer-events-none">{{ area.name }}</div>
              </div>
            </div>
          }

          <!-- 渲染表格 -->
          @for (table of tablesService.tables(); track table.id) {
            <div
              class="absolute bg-white rounded shadow-lg border-2 transition-colors select-none"
              [class.border-gray-200]="!dragService.dragState().isDragging || dragService.dragState().draggedItem?.id !== table.id"
              [class.border-blue-400]="dragService.dragState().isDragging && dragService.dragState().draggedItem?.id === table.id"
              [style.left.px]="table.x"
              [style.top.px]="table.y"
              [style.z-index]="dragService.dragState().draggedItem?.id === table.id ? 1000 : 1"
            >
              <!-- 表格标题 - 作为拖拽手柄 -->
              <div class="px-4 py-2 bg-gray-50 border-b border-gray-200 rounded-t cursor-move"
                   (mousedown)="onMouseDown($event, table.id, 'table', table.x, table.y)">
                <h3 class="font-semibold text-gray-800 select-none">{{ table.name }}</h3>
              </div>

              <!-- 字段列表 -->
              <div class="min-w-48">
                @if (table.fields.length > 0) {
                  @for (field of table.fields; track field.id) {
                    <div class="px-4 py-2 border-b border-gray-100 last:border-b-0 hover:bg-gray-50">
                      <!-- 字段内容保持不变 -->
                      <div class="flex items-center justify-between">
                        <div class="flex items-center space-x-2">
                          @if (field.primaryKey) {
                            <svg class="w-3 h-3 text-yellow-500 fill-current" viewBox="0 0 20 20">
                              <path d="M10 2L13 8l6 .75-4.5 4.5L16 20l-6-3.25L4 20l1.5-6.75L1 8.75 7 8z"/>
                            </svg>
                          }
                          <span class="text-sm font-medium">{{ field.name }}</span>
                        </div>
                        <span class="text-xs text-gray-500">{{ field.type }}</span>
                      </div>
                      @if (field.primaryKey || field.foreignKey || field.notNull || field.unique) {
                        <div class="flex space-x-1 mt-1">
                          @if (field.primaryKey) {
                            <span class="px-1 py-0.5 bg-yellow-100 text-yellow-700 text-xs rounded">PK</span>
                          }
                          @if (field.foreignKey) {
                            <span class="px-1 py-0.5 bg-blue-100 text-blue-700 text-xs rounded">FK</span>
                          }
                          @if (field.notNull) {
                            <span class="px-1 py-0.5 bg-red-100 text-red-700 text-xs rounded">NOT NULL</span>
                          }
                          @if (field.unique) {
                            <span class="px-1 py-0.5 bg-purple-100 text-purple-700 text-xs rounded">UNIQUE</span>
                          }
                        </div>
                      }
                    </div>
                  }
                } @else {
                  <div class="px-4 py-3 text-sm text-gray-400 text-center">暂无字段</div>
                }
              </div>
            </div>
          }

          <!-- 渲染注释 -->
          @for (note of notesService.notes(); track note.id) {
            <div
              class="absolute border-2 border-dashed border-yellow-300 rounded p-3 select-none transition-colors cursor-move"
              [class.border-yellow-500]="dragService.dragState().isDragging && dragService.dragState().draggedItem?.id === note.id"
              [style.left.px]="note.x"
              [style.top.px]="note.y"
              [style.width.px]="note.width"
              [style.height.px]="note.height"
              [style.background-color]="note.color || '#fef3c7'"
              [style.z-index]="dragService.dragState().draggedItem?.id === note.id ? 1000 : 1"
              (mousedown)="onMouseDown($event, note.id, 'note', note.x, note.y)"
            >
              <div class="text-sm text-gray-700 whitespace-pre-wrap pointer-events-none">{{ note.content }}</div>
            </div>
          }

          <!-- 空状态提示 -->
          @if (tablesService.tables().length === 0 && notesService.notes().length === 0 && areasService.areas().length === 0) {
            <div class="absolute top-20 left-20 p-6 bg-white rounded-lg shadow border">
              <div class="text-center">
                <svg class="w-16 h-16 mx-auto mb-4 text-gray-300 fill-none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                        d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
                </svg>
                <h3 class="text-lg font-semibold text-gray-800 mb-2">欢迎使用数据库图表编辑器</h3>
                <p class="text-gray-600 mb-4">开始创建您的数据库设计</p>
                <div class="space-y-2">
                  <p class="text-sm text-gray-500">您可以通过以下方式开始：</p>
                  <ul class="text-sm text-gray-500 space-y-1">
                    <li>• 点击工具栏的"+ 表格"按钮添加数据表</li>
                    <li>• 点击"+ 注释"按钮添加说明文字</li>
                    <li>• 点击"+ 区域"按钮创建分组区域</li>
                  </ul>
                </div>
              </div>
            </div>
          }
        </div>
      </div>

      <!-- Toggle Sidebar Button -->
      <button
        (click)="layoutService.toggleSidebar()"
        class="absolute top-4 left-4 z-10 p-2 bg-white rounded shadow-md hover:shadow-lg transition-shadow"
        [title]="layoutService.sidebarOpen() ? '隐藏侧边栏' : '显示侧边栏'"
      >
        <svg class="w-5 h-5 text-gray-600 fill-none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
        </svg>
      </button>

      <!-- Canvas Controls -->
      <div class="absolute bottom-4 right-4 z-10 flex flex-col space-y-2">
        <button
          (click)="zoomIn()"
          class="p-2 bg-white rounded shadow-md hover:shadow-lg transition-shadow"
          title="放大"
        >
          <svg class="w-4 h-4 text-gray-600 fill-none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
        </button>
        <button
          (click)="zoomOut()"
          class="p-2 bg-white rounded shadow-md hover:shadow-lg transition-shadow"
          title="缩小"
        >
          <svg class="w-4 h-4 text-gray-600 fill-none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6"></path>
          </svg>
        </button>
        <button
          (click)="resetZoom()"
          class="p-2 bg-white rounded shadow-md hover:shadow-lg transition-shadow text-xs min-w-12"
          title="重置缩放"
        >
          {{ Math.round(transformService.transform().zoom * 100) }}%
        </button>
        <button
          (click)="resetPosition()"
          class="p-2 bg-white rounded shadow-md hover:shadow-lg transition-shadow"
          title="重置位置"
        >
          <svg class="w-4 h-4 text-gray-600 fill-none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                  d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5v10l4-2 4 2V5"></path>
          </svg>
        </button>
      </div>

      <!-- 变换信息显示 -->
      <div class="absolute bottom-4 left-4 z-10 bg-white rounded shadow-md px-3 py-2 text-xs text-gray-600">
        <div>缩放: {{ Math.round(transformService.transform().zoom * 100) }}%</div>
        <div>位置: ({{ Math.round(transformService.transform().x) }}, {{ Math.round(transformService.transform().y) }}
          )
        </div>
      </div>
    </div>
  </div>
</div>
